import { Button, Form } from '@tarojs/components'
import { useDispatch, useSelector } from 'react-redux'
import { getUserInfoService } from '@/api/user'
import { UserState } from '@/reducers/user'
import { useEffect, useState } from 'react'
import Drawer from '@/components/Drawer'
import { SET_USER } from '@/constants'
import editStyle from './index.module.scss'

export default function Edit() {
  const dispatch = useDispatch()
  const [showDrawer, setShowDrawer] = useState<boolean>(false)
  const [action, setAction] = useState<number>()
  const user: UserState = useSelector((state: any) => state.user)
  useEffect(() => {
    console.log('资料编辑页user信息获取：', user)
  }, [user])
  //const [isOpened, setIsOpened] = useState<boolean>(false)
  const controlDrawerShow = () => {
    setShowDrawer(!showDrawer)
  }
  const changeAllInfo = () => {
    setAction(6)
    controlDrawerShow()
  }
  const getUserInfo = async () => {
    try {
      const res = await getUserInfoService()
      if (res.code === 0) {
        //存获取的数据入仓库
        if (res.data.phone === null) {
          res.data.phone = '未绑定'
        }
        if (res.data.realName === null) {
          res.data.realName = '未绑定'
        }
        dispatch({
          type: SET_USER,
          payload: {
            avatar: res.data.avatar,
            nickname: res.data.nickName,
            amount: res.data.amount,
            phone: res.data.phone,
            realName: res.data.realName,
            sex: res.data.sex,
          },
        })
        console.log('打印个人信息请求信息：', res)
        console.log('打印保存好的仓库信息', user)
      }
    } catch (err) {
      console.log(err)
    }
  }

  //action的12345分别代表改头像，改昵称，改性别，改姓名，改手机号，改全部信息
  const changeAvatar = () => {
    setAction(1)
    controlDrawerShow()
  }

  const changeNickname = () => {
    setAction(2)
    controlDrawerShow()
  }

  const changeSex = () => {
    setAction(3)
    controlDrawerShow()
  }

  const changeName = () => {
    setAction(4)
    controlDrawerShow()
  }

  const changePhone = () => {
    setAction(5)
    controlDrawerShow()
  }
  return (
    <div className={editStyle.editPage}>
      <div className={editStyle.edit}>
        <Form>
          <div className={editStyle.editForm}>
            <div className={editStyle.editItem} onClick={changeAvatar}>
              <div>头像</div>
              <div>
                <img src={user.avatar} alt='' className={editStyle.avatar} />
              </div>
            </div>
            <div className={editStyle.editItem} onClick={changeNickname}>
              <div>昵称</div>
              <div>{user.nickname}</div>
            </div>
            <div className={editStyle.editItem} onClick={changeSex}>
              <div>性别</div>
              <div>{user.sex}</div>
            </div>
            <div className={editStyle.editItem} onClick={changeName}>
              <div>姓名</div>
              <div className={editStyle.right}>
                {user.realName}
                <img
                  src={require('../../assets/open.png')}
                  alt=''
                  className={editStyle.open}
                />
              </div>
            </div>
            <div className={editStyle.editItem} onClick={changePhone}>
              <div>手机号</div>
              <div className={editStyle.right}>
                {user.phone}
                <img
                  src={require('../../assets/open.png')}
                  alt=''
                  className={editStyle.open}
                />
              </div>
            </div>
          </div>
          <div className={editStyle.button_box}>
            <Button className={editStyle.button} onClick={changeAllInfo}>
              更新多个信息
            </Button>
          </div>
        </Form>
        {showDrawer && (
          <Drawer
            controlDrawerShow={controlDrawerShow}
            getUserInfo={getUserInfo}
            action={action}
          ></Drawer>
        )}
      </div>
    </div>
  )
}
